<template>
	<div>
		<div style="position:fixed;top:0;width:100%;border-bottom:1px solid #ccc ;height:52px">
		<van-search placeholder="请输入搜索关键词" v-model="value" shape="round" class="search" input-align='center' />
		</div>
		<!-- 轮播图 -->
	  <div style="overflow: hidden;margin-top:53px;margin-bottom:30px" class="section">
		<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
			<van-row type="flex">
				<van-col span="1"></van-col>
				<van-col span="22">
					<van-swipe :autoplay="3000" :height='150' class="swipe">
						<van-swipe-item v-for="(image, index) in images" :key="index">
							<!-- :key="index" -->
							<img :src="image.banner_img_url" class="image" />
						</van-swipe-item>
					</van-swipe>
				</van-col>
				<van-col span="1"></van-col>
			</van-row>


			<div class="feilei">
				<van-row type="flex">
					<van-col span="1"></van-col>
					<van-col span="22">
						<van-row type="flex" justify="space-between">
							<van-col span="6" class="cola col">
								<router-link to='/sort' style='color:#101010'>分类</router-link>
								</van-col>
							<van-col span="6" class="col" >
								<router-link to="/jiazuo" style='color:#101010'>
								本周佳作
								</router-link>
								</van-col>
							<van-col span="6" class="col">
								<router-link to="/meony"  style='color:#101010'>签到领现金</router-link>
								</van-col>
							<van-col span="6" class="col">
								<router-link to="/eat"  style='color:#101010'>健身七分吃</router-link>
								</van-col>
						</van-row>
					</van-col>
					<van-col span="1"></van-col>
				</van-row>
			</div>
				<!-- 完 -->
				
				
			<div class="feilei">
				<van-row type="flex">
					<van-col span="1"></van-col>
					<van-col span="22">
						<van-row justify="space-between" type="flex">
							<van-col span="5" class="col cola">
								<router-link  to="/bake"  style='color:#101010'>
								烘焙
								</router-link></van-col>
							<van-col span="5" class="col cola">
								<router-link  to="/soup"  style='color:#101010'>
								煲汤
								</router-link>
								</van-col>
							<van-col span="5" class="col">
								<router-link  to="/vegan"  style='color:#101010'>
								素食主义
								</router-link>
								</van-col>
							<van-col span="5" class="col">
								
								经期管家
								
								</van-col>
						</van-row>
					</van-col>
					<van-col span="1"></van-col>
				</van-row>
			</div>
			
			
			<!-- 视频 -->
			<div style="width:100%;text-align: center;color:#101010;margin-top:40px;margin-bottom:9px">
				<h1 style="font-weight:normal ;font-size:28px">精彩视频</h1>
			</div>

			<div>
				<van-row>
					<van-col span="1"></van-col>
					<van-col span="22">
						<van-row type="flex" justify="space-between" v-for="(video,index) in videos" :key="index">
							<van-col span="10" class="Van">
								<video width="100%" height="100%" controls>
									<source :src="video.video_url" type="video/mp4" >

								</video>
							</van-col>

							<van-col span="10" class="Van">
								<div class='Van-con con'>
									<video width="100%" height="100%" controls>
										<source :src="video.video_url" type="video/mp4">

									</video>
								</div>
								<div class='Van-con'>
									<video width="100%" height="100%" controls>
										<source :src="video.video_url" type="video/mp4">

									</video>
								</div>
							</van-col>
						</van-row>



					</van-col>
					<van-col span="1"></van-col>
				</van-row>


			</div>
		</van-pull-refresh>
	  </div>
	</div>
</template>

<script>
	
	import axios from 'axios'
	import Mock from 'mockjs'
	export default {
		name: "Home",
		data() {
			return {
				value: '',
				images: [

				],
				videos: [],
				isLoading: false
			}
		},
		methods: {
			onRefresh() {
				setTimeout(() => {
					this.$toast('刷新成功');
					this.isLoading = false;

				}, 500);
			},
			
		},
		mounted() {
			let that = this
			axios({
					url: ' http://jx.xuzhixiang.top/ap/api/bannerlist.php',
					params: {
						uid: 14510
					}
				}).then((res) => {
					// console.log(res.data.data)
					that.images = res.data.data
				}),
				// axios({
				// 	url: 'http://jx.xuzhixiang.top/ap/api/add-product.php',
				// }).then((res) => {
				// 	console.log(res.data.video)
				// 	that.videos = res.data.video
				// })
				axios({
								// method:'post',
								url:'http://10.8.158.36:8080/vegetarianismMenu.do',
								params:{id:'id',title:'豆腐'},
							}).then((res)=>{
								console.log(res.data.data)
								that.videos = res.data.data
							})
		}
	}
</script>

<style>
	* {
		margin: 0;
		padding: 0
	}

	.search {
		text-align: center;
	}

	.image {
		width: 100%;
		height: 100%;
		display: inline-block;
	}

	.feilei {
		font-size: 16px;
		margin-top: 20px;
		text-align: center
	}

	.cola {
		width: 40px;
	}

	/* .col {
		height: 25px;

	} */
	.Van {
		height: 190px;
		margin-bottom: 20px
	}

	.Van-con {
		height: 80px;
		width: 100%
	}

	.con {
		margin-bottom: 30px
	}
</style>
